<template>
  <div class="about">
    <div class="about-header">
      <a-button @click="checkList" style="margin-right:24px" type="primary">
        查询
      </a-button>
      <a-button @click="openModal" type="dashed">
        新增
      </a-button>
    </div>
    <div class='about-center'>
      <a-table bordered :dataSource="dataSource" :columns="columns">
        <template #handle="{ record }">
          <div class="flex">
            <a-button size="small" type="primary" @click="editRow(record)" > 编辑</a-button>
            <a-popconfirm title="确定删除嘛?"  @confirm="deleteRow(record)" ok-text="确定" cancel-text="返回">
              <a-button size="small" type="danger">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="visible" v-if="visible" v-model:title="title"  @ok="handleOk">
      <a-form
        ref="formRef"
        :model="formState"
        labelAlign="right"
        :rules="rules"
        :label-col="4"
        :wrapper-col="11"
      >
        <a-form-item ref="name" required label="姓名" name="name">
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <a-form-item label="年龄" name="age">
          <a-input v-model:value="formState.age" />
        </a-form-item>
        <a-form-item label="住址" required name="address">
          <a-input v-model:value="formState.address" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { ref, onMounted,} from 'vue';
import { TableApi } from '@/api/tableApi';
export default {
  setup() {
    const rules = {
      name: [
        {
          required: true,
          message: '请填写名称',
          trigger: 'blur',
        }
      ],
      address: [
        {
          required: true,
          message: '请填写住址',
          trigger: 'change',
        },
      ],
    }
    const formRef = ref();
    let title = ref('');
    const formState = ref({
      name: '',
      age: '',
      address: '',
    });
    let visible = ref(false);
    let dataSource = ref([]) 
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        dataIndex: 'handle',
        slots: { customRender: 'handle' },
        key: 'handle',
      },
    ];
    /**
     * @desc:查询
     */
    const checkList = async () =>{
      dataSource.value = await TableApi.getTableList();
      console.log('dataSource',dataSource);
    }

    /**
     * @desc:删除
     */
    const deleteRow = (row)=>{
      dataSource.value = dataSource.value.filter(res=>res.key !== row.key);
    }
    onMounted(checkList);

    /**
     * @desc:新增
     */
    const openModal = ()=>{
      formState.value = {
        name: '',
        age: '',
        address: '',
      };
      title.value = '新增数据';
      visible.value = true;
    };

    /**
     * @desc:修改
     */
    const editRow = (row)=>{
      const rowCopy = { ...row };
      formState.value = rowCopy;
      title.value = '编辑数据';
      visible.value = true;
    };

    /**
     * @desc:弹窗确认
     */
    const handleOk = ( )=>{
      formRef.value
        .validate()
        .then(() => {
          if(title.value === "新增数据"){
            formState.value.key = dataSource.value.length+ formState.value.name +'';
          }else{
            dataSource.value = dataSource.value.filter(item => item.key !== formState.value.key );
          }
          dataSource.value.unshift(formState.value);
          visible.value = false;
        })
        .catch(() => {
          console.log('error', "未通过！");
        });
    };
    const comRef = ref(null);
    return {
      comRef,
      handleOk,
      deleteRow,
      dataSource,
      columns,
      checkList,
      openModal,
      title,
      visible,
      formState,
      formRef,
      rules,
      editRow
    }
  }
}
</script>
<style  scoped>
  .about-header{
    width: 100%;
    padding-left: 24px;
    text-align: left;
  }
  .about-center{
    padding: 24px;
  }
  .flex{
    display: flex;
    justify-content: space-evenly;
  }
</style>
